<template>
	<view class="container">
		<!-- 瀑布流商品列表 -->
		<view class="waterfall-container">
			<view class="waterfall-column" v-for="(column, columnIndex) in waterfallColumns" :key="columnIndex">
				<view class="product-item" v-for="(product, productIndex) in column" :key="product.id"
					@click="viewProduct(product)">
					<view class="product-image-container">
						<image :src="product.image" class="product-image" mode="aspectFill" />
						<!-- <view class="product-badge">精美礼品</view> -->
					</view>
					<view class="product-info">
						<text class="product-title">{{ product.title }}</text>
						<!-- <view class="product-price-row">
              <text class="product-price">¥{{ product.price }}</text>
              <text class="product-original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
            </view>
            <view class="product-stats">
              <text class="product-sales">已售{{ product.sales }}</text>
              <view class="product-rating">
                <text class="rating-stars">⭐⭐⭐⭐⭐</text>
                <text class="rating-count">({{ product.reviews }})</text>
              </view>
            </view> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多提示 -->
		<view class="loading-more" v-if="isLoading">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 没有更多数据提示 -->
		<view class="no-more" v-if="noMore && !isLoading">
			<text class="no-more-text">没有更多商品了</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				noMore: false,
				columnCount: 2, // 瀑布流列数
				waterfallColumns: [
					[],
					[]
				], // 瀑布流列数据
				products: [], // 所有商品数据
				page: 1,
				pageSize: 10
			}
		},
		onLoad() {
			this.loadProducts();
		},
		onReachBottom() {
			if (!this.isLoading && !this.noMore) {
				this.loadMoreProducts();
			}
		},
		onPullDownRefresh() {
			this.refreshProducts();
		},
		methods: {
			// 生成模拟商品数据
			generateMockProducts(count = 5) {
				const products = [];
				const titles = [
					'精美蓝色礼品盒套装',
					'高档商务礼品组合',
					'创意生日礼物盒',
					'节日特别礼品装',
					'豪华包装礼品盒',
					'简约时尚礼品套装',
				];

				for (let i = 0; i < count; i++) {
					const randomHeight = 400 + Math.floor(Math.random() * 200); // 随机高度制造瀑布流效果
					products.push({
						id: Date.now() + i,
						title: titles[i % titles.length],
						price: (Math.random() * 500 + 50).toFixed(2),
						originalPrice: Math.random() > 0.5 ? (Math.random() * 200 + 600).toFixed(2) : null,
						sales: Math.floor(Math.random() * 1000) + 10,
						reviews: Math.floor(Math.random() * 500) + 5,
						image: `/static/giftList/${i+1}.png`,
						imageHeight: randomHeight
					});
				}
				return products;
			},

			// 加载商品数据
			async loadProducts() {
				this.isLoading = true;
				try {
					// 模拟API调用
					await this.delay(1000);
					const newProducts = this.generateMockProducts(1);
					this.products = newProducts;
					this.distributeToColumns(newProducts);
				} catch (error) {
					console.error('加载商品失败:', error);
				} finally {
					this.isLoading = false;
				}
			},

			// 加载更多商品
			async loadMoreProducts() {
				// if (this.page > 5) { // 模拟最多5页数据
				// 	this.noMore = true;
				// 	return;
				// }

				// this.isLoading = true;
				// try {
				// 	await this.delay(1000);
				// 	this.page++;
				// 	const newProducts = this.generateMockProducts(this.pageSize);
				// 	this.products = [...this.products, ...newProducts];
				// 	this.distributeToColumns(newProducts);
				// } catch (error) {
				// 	console.error('加载更多失败:', error);
				// } finally {
				// 	this.isLoading = false;
				// }
			},

			// 刷新商品
			async refreshProducts() {
				this.page = 1;
				this.noMore = false;
				this.waterfallColumns = [
					[],
					[]
				];
				await this.loadProducts();
				uni.stopPullDownRefresh();
			},

			// 将商品分配到瀑布流列中
			distributeToColumns(products) {
				products.forEach(product => {
					// 找到高度最小的列
					const columnHeights = this.waterfallColumns.map(column =>
						column.reduce((height, item) => height + item.imageHeight + 200, 0) // 200是额外的信息区域高度
					);
					const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
					this.waterfallColumns[minHeightIndex].push(product);
				});
			},

			// 查看商品详情
			viewProduct(product) {
				uni.navigateTo({
					url: `/pagesA/giftDetails/giftDetails?id=${product.id}`
				});
			},

			// 延迟函数
			delay(ms) {
				return new Promise(resolve => setTimeout(resolve, ms));
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: #fff;
		padding: 20rpx;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.search-bar {
		position: relative;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		padding: 0 80rpx 0 30rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-icon {
		position: absolute;
		right: 30rpx;
		font-size: 30rpx;
		color: #999;
	}

	.waterfall-container {
		display: flex;
		padding: 20rpx 10rpx;
		gap: 20rpx;
	}

	.waterfall-column {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;
	}

	.product-item:active {
		transform: scale(0.98);
	}

	.product-image-container {
		position: relative;
		overflow: hidden;
	}

	.product-image {
		width: 100%;
		border-radius: 16rpx 16rpx 0 0;
	}

	.product-badge {
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: 500;
	}

	.product-info {
		padding: 24rpx;
	}

	.product-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 16rpx;
	}

	.product-price-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		gap: 16rpx;
	}

	.product-price {
		font-size: 32rpx;
		color: #ff4757;
		font-weight: 600;
	}

	.product-original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.product-stats {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-sales {
		font-size: 22rpx;
		color: #666;
	}

	.product-rating {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.rating-stars {
		font-size: 20rpx;
	}

	.rating-count {
		font-size: 22rpx;
		color: #666;
	}

	.loading-more {
		text-align: center;
		padding: 40rpx 0;
	}

	.loading-text {
		font-size: 26rpx;
		color: #999;
	}

	.no-more {
		text-align: center;
		padding: 40rpx 0;
	}

	.no-more-text {
		font-size: 26rpx;
		color: #ccc;
	}

	/* 输入框重置样式 */
	input {
		background: transparent;
		border: none;
		outline: none;
	}

	/* 图片加载动画 */
	.product-image {
		background-color: #f0f0f0;
		transition: opacity 0.3s ease;
	}
</style>